<template>
  <el-card class="event-detail-card">
    <div v-if="!event">加载中...</div>
    <div v-else>
      <h2>{{ event.title }}</h2>
      <div>描述：{{ event.description }}</div>
      <div>开始时间：{{ event.startTime }}</div>
      <div>最大人数：{{ event.maxParticipants }}</div>
      <div>当前报名人数：
        <span :style="{color: stats.registrationCount > stats.maxParticipants ? 'red' : ''}">
          {{ stats.registrationCount }} / {{ stats.maxParticipants }}
        </span>
        <el-alert v-if="stats.registrationCount > stats.maxParticipants" type="error" show-icon title="报名人数已超出最大限制！" style="margin-top:8px;" />
      </div>
      <div>类型：{{ eventTypeLabel(event.type) }}</div>
      <el-button type="primary" @click="showForm = !showForm" style="margin-right:10px;">报名</el-button>
      <el-button @click="onCheckIn">签到</el-button>
      <el-button @click="showQr = true" style="margin-left:10px;">签到二维码</el-button>
      <el-dialog v-model="showQr" title="签到二维码" width="350px" center>
        <img :src="qrUrl" style="width:300px;height:300px;" />
      </el-dialog>
      <el-form v-if="showForm && formSchema.length" :model="formData" @submit.prevent="onRegister" label-width="80px" style="margin-top:20px;max-width:400px;">
        <el-form-item v-for="item in formSchema" :key="item.prop" :label="item.label">
          <el-input v-if="item.type==='input'" v-model="formData[item.prop]" :required="item.required" />
          <el-select v-else-if="item.type==='select'" v-model="formData[item.prop]">
            <el-option v-for="opt in item.options" :key="opt.value" :label="opt.label" :value="opt.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit">提交报名</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { eventApi } from '../api/event'
import { registrationApi } from '../api/registration'
import { checkInApi } from '../api/checkIn'
import type { Event } from '../types/event'
import { ElMessage } from 'element-plus'

const route = useRoute()
const event = ref<Event | null>(null)
const showForm = ref(false)
const formSchema = ref<any[]>([])
const formData = ref<any>({})
const showQr = ref(false)
const qrUrl = ref('')
const stats = ref({ registrationCount: 0, maxParticipants: 0 })
const user = JSON.parse(localStorage.getItem('user') || '{}')

const defaultFormSchema = [
  { prop: 'name', label: '姓名', type: 'input', required: true },
  { prop: 'phone', label: '手机号', type: 'input', required: true }
]

onMounted(async () => {
  const res = await eventApi.getEvent(Number(route.params.id))
  event.value = res
  try {
    formSchema.value = event.value.formSchema
      ? JSON.parse(event.value.formSchema)
      : defaultFormSchema
  } catch {
    formSchema.value = defaultFormSchema
  }
  qrUrl.value = `/api/events/${route.params.id}/qr-code`
  // 获取报名统计
  const statRes = await eventApi.getEventStats(Number(route.params.id))
  stats.value = statRes
})

const onRegister = async () => {
  if (!user.userId) {
    ElMessage.error('请先登录！')
    return
  }
  await registrationApi.register({ userId: user.userId, eventId: Number(route.params.id), formData: JSON.stringify(formData.value) })
  ElMessage.success('报名成功')
  showForm.value = false
}

const onCheckIn = async () => {
  if (!user.userId) {
    ElMessage.error('请先登录！')
    return
  }
  await checkInApi.checkIn({ userId: user.userId, eventId: Number(route.params.id), qrCode: 'test' })
  ElMessage.success('签到成功')
}

const eventTypeLabel = (type: string) => {
  switch(type) {
    case 'LECTURE': return '讲座'
    case 'COMPETITION': return '比赛'
    case 'CLUB_RECRUITMENT': return '社团招新'
    default: return type
  }
}
</script>
<style scoped>
.event-detail-card {
  max-width: 600px;
  margin: 40px auto;
}
</style> 